<template>
    <div>
        <h1>User Profile</h1>
        <input v-model="username" placeholder="Enter username" />
        <input v-model="email" placeholder="Enter email" />
        <button @click="updateProfile">Update Profile</button>
        <p>Username: {{ username }}</p>
        <p>Email: {{ email }}</p>
    </div>
</template>

<script setup>
import { useUserStore } from "../store/useUserStore .js"
import { computed } from 'vue';

const userStore = useUserStore();

const username = computed({
    get: () => userStore.username,
    set: (newValue) => userStore.setUsername(newValue),
});

const email = computed({
    get: () => userStore.email,
    set: (newValue) => userStore.setEmail(newValue),
});

function updateProfile() {
    console.log('Updated username:', username.value);
    console.log('Updated email:', email.value);
}
</script>
